<template>
  <div
    ref="listEl"
    class="flex flex-wrap flex-row items-center"
    :class="{ 'items-center justify-center': innerData.length === 0 }"
  >
    <div
      v-for="el in innerData"
      :key="el.userId"
      class="flex flex-row items-center mb-4"
      :style="{ width: ITEM_WIDTH + 'px' }"
    >
      <!-- <a-avatar>
        <template #icon><Icon type="icon-gerenzhongxin" /></template>
      </a-avatar> -->
      <div>
        <img src="../../../assets/user-logo.svg" class="w-10 h-10 rounded-full" />
      </div>
      <div class="ml-2 flex-1 pr-2 overflow-hidden">
        <div class="text-color-main text-ellipsis overflow-hidden whitespace-nowrap">{{ el.userName }}</div>
        <div class="text-color-secondary text-sm text-ellipsis overflow-hidden whitespace-nowrap">
          {{ el.companyShortName }}
        </div>
      </div>
    </div>
    <div v-show="hasMore" class="mb-4 cursor-pointer" :style="{ width: ITEM_WIDTH + 'px' }" @click="toggleShowMore">
      <template v-if="isShowMore">
        <span
          class="rounded-full border border-solid border-color-active inline-block text-center align-middle"
          style="width: 32px; height: 32px; font-size: 16px; line-height: 32px"
        >
          <Icon type="icon-shang" class="!text-color-active" />
        </span>
        <span class="ml-2 text-color-active align-middle">
          {{ t("common.collapse") }}
        </span>
      </template>
      <template v-else>
        <a-avatar class="!bg-color-active"> {{ "+" + (total - innerData.length) }} </a-avatar>
        <span class="ml-2 text-color-active align-middle">
          {{ t("common.more") }}
        </span>
      </template>
    </div>
    <SlEmpty v-if="innerData.length === 0 && inited" :description="keyword ? t('common.notFound') : ''" />
  </div>
</template>
<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import type { RoleUserItem } from "/@/api/aiot/role/models";
import Icon from "/@/components/Icon.vue";
import { useI18n } from "/@/locales/useI18n";
import resizer from "/@/utils/resizer";
import SlEmpty from "/@/components/SlEmpty.vue";
import { UserListExpose } from "/@/types/components";

//最多两行
const MAX_ROW_NUM = 2;
const ITEM_WIDTH = 180;

const props = defineProps<{
  data: RoleUserItem[];
  total: number;
  inited: boolean;
  keyword?: string;
}>();
const { t } = useI18n();
const hasMore = ref(false);
const innerData = ref<RoleUserItem[]>([]);

const listEl = ref<HTMLDivElement>();
let lastColumnNum = -1;
function resize(data: RoleUserItem[]) {
  if (isShowMore.value) return;
  if (data.length === 0) {
    innerData.value = [];
    hasMore.value = false;
    return;
  }
  if (listEl.value) {
    const filterData = myExpose.getData({ allData: data, keyword: props.keyword });
    const width = listEl.value.offsetWidth;
    let columnNum = Math.floor(width / ITEM_WIDTH);
    if (columnNum === 0) columnNum = 1;
    if (lastColumnNum === columnNum) return;
    lastColumnNum = columnNum;
    const maxItemNum = columnNum * MAX_ROW_NUM;
    // console.log("----------------------", width, ITEM_WIDTH, columnNum);
    hasMore.value = filterData.length > maxItemNum;
    if (hasMore.value) {
      filterData.splice(maxItemNum - 1, filterData.length);
    }
    innerData.value = filterData;
  }
}
const isShowMore = ref(false);
function toggleShowMore() {
  isShowMore.value = !isShowMore.value;
  if (isShowMore.value) {
    innerData.value = props.data;
  } else {
    lastColumnNum = -1;
    resize([...props.data]);
  }
}
watch(
  () => props.data,
  (newData) => {
    lastColumnNum = -1;
    isShowMore.value = false;
    //需等待外界dom渲染好 以防计算宽度错误
    nextTick(() => {
      resize([...newData]);
    });
  }
);
watch(
  () => props.keyword,
  () => {
    lastColumnNum = -1;
    isShowMore.value = false;
    resize([...props.data]);
  }
);
let resizeId: number;
onMounted(() => {
  resizeId = resizer.add(
    () => {
      resize([...props.data]);
    },
    {
      immediate: true,
    }
  );
});
onBeforeUnmount(() => {
  // console.log("UserList unmount", resizeId);
  resizer.remove(resizeId);
});
const myExpose: UserListExpose = {
  getData(params) {
    if (params) {
      const filterData: RoleUserItem[] = params.allData.filter((el) => {
        if (!params.keyword) return true;
        const keyword = params.keyword.replace(/\s+/g, "");
        if (!keyword) return true;
        return el.userName && el.userName.includes(keyword);
      });
      return filterData;
    }
    return props.data;
  },
};
defineExpose(myExpose);
</script>
